<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="keywords" content="admin, dashboard, bootstrap, template, flat, modern, theme, responsive, fluid, retina, backend, html5, css, css3">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>index</title>

    <!--icheck-->
    <link href="/js/iCheck/skins/minimal/minimal.css" rel="stylesheet">
    <link href="/js/iCheck/skins/square/square.css" rel="stylesheet">
    <link href="/js/iCheck/skins/square/red.css" rel="stylesheet">
    <link href="/js/iCheck/skins/square/blue.css" rel="stylesheet">

    <!--dashboard calendar-->
    <link href="/css/clndr.css" rel="stylesheet">


    <!--common-->
    <link href="/css/style.css" rel="stylesheet">
    <link href="/css/style-responsive.css" rel="stylesheet">

</head>

<body class="sticky-header">

<section>
    <!-- left side start-->
    <div class="left-side sticky-left-side">

        <!--logo and iconic logo start-->
        <div class="logo">
            <a th:href="@{/index}"><img src="/images/logo.png"></a>
        </div>

        <div class="logo-icon text-center">
            <a th:href="@{/index}"><img src="/images/logo_icon.png"></a>
        </div>
        <!--logo and iconic logo end-->

        <div class="left-side-inner">

            <!-- visible to small devices only -->
            <div class="visible-xs hidden-sm hidden-md hidden-lg">
                <div class="media logged-user">
                    <img alt="" src="/images/photos/user-avatar.png" class="media-object">
                    <div class="media-body">
                        <h4><a href="#">John Doe</a></h4>
                        <span>"Hello There..."</span>
                    </div>
                </div>

                <h5 class="left-nav-title">用户信息</h5>
                <ul class="nav nav-pills nav-stacked custom-nav">
                    <li><a href="#"><i class="fa fa-user"></i>  Profile</a></li>
                    <li><a href="#"><i class="fa fa-cog"></i>  Settings</a></li>
                    <li><a href="#"><i class="fa fa-sign-out"></i> Log Out</a></li>
                </ul>
            </div>

            <!--sidebar nav start-->
            <ul class="nav nav-pills nav-stacked custom-nav">
                <li class="menu-list nav-active"><a href=""><i class="fa fa-home"></i> <span>储蓄卡</span></a>
                    <ul class="sub-menu-list">
                        <li><a th:href="@{/jumpDeposit}"><i class="fa fa-sign-in"></i> <span>存款</span></a></li>
                        <li><a th:href="@{/jumpWithdrawals}"><i class="fa fa-laptop"></i> <span>取款</span></a></li>
                        <li><a th:href="@{/findOtherById}"><i class="fa fa-envelope"></i> <span>转账</span></a></li>
                        <li><a th:href="@{/findInformation}"><i class="fa fa-envelope"></i> <span>查看交易明细</span></a></li>
                        <li><a th:href="@{/jumpLogin}"><i class="fa fa-sign-in"></i> <span>退出</span></a></li>
                    </ul>
                </li>
                <li class="menu-list nav-active"><a href=""><i class="fa fa-home"></i> <span>信用卡</span></a>
                    <ul class="sub-menu-list">
                        <li><a th:href="@{/jumpDepositCredit}"><i class="fa fa-sign-in"></i> <span>存款</span></a></li>
                        <li><a th:href="@{/jumpWithdrawalsCredit}"><i class="fa fa-laptop"></i> <span>取款</span></a></li>
                        <li><a th:href="@{/findInformationCredit}"><i class="fa fa-envelope"></i> <span>查看交易明细</span></a></li>
                        <li><a th:href="@{/jumpLogin}"><i class="fa fa-sign-in"></i> <span>退出</span></a></li>
                    </ul>
                </li>

            </ul>
            <!--sidebar nav end-->

        </div>
    </div>
    <!-- left side end-->

    <!-- main content start-->
    <div class="main-content" >

        <!-- header section start-->
        <div class="header-section">

            <!--toggle button start-->
            <a class="toggle-btn"><i class="fa fa-bars"></i></a>
            <!--toggle button end-->

            <!--notification menu start -->
            <div class="menu-right">
                <ul class="notification-menu">
                    <li>
                        <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <img src="/images/photos/xk.jpg"/>
                            [[${session.loginUser.username}]]
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-usermenu pull-right">
                            <li><a th:href="@{/jumpForget}"><i class="fa fa-cog"></i>修改密码</a></li>
                            <li><a th:href="@{/jumpLogin}"><i class="fa fa-sign-out"></i>退出</a></li>
                            <li><a th:href="@{/cancellation}"><i class="fa fa-sign-out"></i>注销</a></li>
                        </ul>
                    </li>

                </ul>
            </div>
            <!--notification menu end -->

        </div>
        <!-- header section end-->



        <!--body wrapper start-->
        <div class="wrapper">
            <div class="row states-info">
                <div class="col-md-6">
                    <div class="panel red-bg">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-xs-4">
                                    <i class="fa fa-money"></i>
                                </div>
                                <div class="col-xs-8">
                                    <span class="state-title" style="text-align: center">账户名称</span>
                                    <h4>[[${session.loginUser.username}]]</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="panel blue-bg">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-xs-4">
                                    <i class="fa fa-tag"></i>
                                </div>
                                <div class="col-xs-8" th:if="${session.currentMoney} ge 0">
                                    <span class="state-title">储蓄卡余额</span>
                                    <h4 >
                                        ￥[[${session.currentMoney}]]
                                    </h4>
                                </div>
                                <div class="col-xs-8" th:if="${session.currentMoney} lt 0">
                                    <span class="state-title">储蓄卡</span>
                                    <h4>
                                        无账户
                                    </h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="panel green-bg">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-xs-4">
                                    <i class="fa fa-gavel"></i>
                                </div>
                                <div class="col-xs-8" th:if="${session.currentCredit}!=null and ${session.currentCredit} ge 0">
                                    <span class="state-title">信用卡可用额度</span>
                                    <h4>￥[[${session.currentCredit}]]</h4>
                                </div>
                                <div class="col-xs-8" th:if="${session.currentCredit}!=null and ${session.currentCredit} lt 0">
                                    <span class="state-title">您已透支</span>
                                    <h4>￥[[${session.overMoney}]]</h4>
                                </div>
                                <div class="col-xs-8" th:if="${session.currentCredit}==null">
                                    <span class="state-title">信用卡</span>
                                    <h4>无账户</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="panel yellow-bg">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-xs-4">
                                    <i class="fa fa-eye"></i>
                                </div>
                                <div class="col-xs-8" th:if="${session.preparedBack}==null">
                                    <span class="state-title">信用卡</span>
                                    <h4>无账户</h4>
                                </div>
                                <div class="col-xs-8" th:if="${session.preparedBack}!=null and ${session.preparedBack} ge 0">
                                    <span class="state-title">信用卡待还余额</span>
                                    <h4>￥[[${session.preparedBack}]]</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-body">
                            <div class="dir-info">
                                <div class="row">
                                    <div class="col-xs-3">
                                        <div class="avatar">
                                            <img src="/images/photos/xk.jpg" alt=""/>
                                        </div>
                                    </div>
                                    <div class="col-xs-6">
                                        <h4>徐凯</h4>
                                        <span>
                                            <a href="#"class="small"><h4>项目组长</h4></a>
                                        </span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-3">
                                        <div class="avatar">
                                            <img src="/images/photos/lqx.jpg" alt=""/>
                                        </div>
                                    </div>
                                    <div class="col-xs-6">
                                        <h4>刘芊杏</h4>
                                        <span>
                                            <a href="#" class="small"><h4>技术</h4></a>
                                        </span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-3">
                                        <div class="avatar">
                                            <img src="/images/photos/gj.jpg" alt=""/>
                                        </div>
                                    </div>
                                    <div class="col-xs-6">
                                        <h4>高婧</h4>
                                        <span>
                                            <a href="#" class="small"><h4>技术</h4></a>
                                        </span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-3">
                                        <div class="avatar">
                                            <img src="/images/photos/dsq.jpg" alt=""/>
                                        </div>
                                    </div>
                                    <div class="col-xs-6">
                                        <h4>代飔琦</h4>
                                        <span>
                                            <a href="#" class="small"><h4>技术</h4></a>
                                        </span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-3">
                                        <div class="avatar">
                                            <img src="/images/photos/wnq.jpg" alt=""/>
                                        </div>
                                    </div>
                                    <div class="col-xs-6">
                                        <h4>王念琴</h4>
                                        <span>
                                            <a href="#" class="small"><h4>技术</h4></a>
                                        </span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-3">
                                        <div class="avatar">
                                            <img src="/images/photos/cb.jpg" alt=""/>
                                        </div>
                                    </div>
                                    <div class="col-xs-6">
                                        <h4>陈彬</h4>
                                        <span>
                                            <a href="#" class="small"><h4>技术</h4></a>
                                        </span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-3">
                                        <div class="avatar">
                                            <img src="/images/photos/hhy.jpg" alt=""/>
                                        </div>
                                    </div>
                                    <div class="col-xs-6">
                                        <h4>胡华宇</h4>
                                        <span>
                                            <a href="#" class="small"><h4>技术</h4></a>
                                        </span>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!--body wrapper end-->

        <!--footer section start-->
        <footer>
            2021 &copy; SICNU By Xukai
        </footer>
        <!--footer section end-->


        </div>
    </div>
    <!-- main content end-->
</section>

<!-- Placed js at the end of the document so the pages load faster -->
<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="/js/jquery-migrate-1.2.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.nicescroll.js"></script>

<!--easy pie chart-->
<script src="/js/easypiechart/jquery.easypiechart.js"></script>
<script src="/js/easypiechart/easypiechart-init.js"></script>

<!--Sparkline Chart-->
<script src="/js/sparkline/jquery.sparkline.js"></script>
<script src="/js/sparkline/sparkline-init.js"></script>

<!--icheck -->
<script src="/js/iCheck/jquery.icheck.js"></script>
<script src="/js/icheck-init.js"></script>

<!-- jQuery Flot Chart-->
<script src="/js/flot-chart/jquery.flot.js"></script>
<script src="/js/flot-chart/jquery.flot.tooltip.js"></script>
<script src="/js/flot-chart/jquery.flot.resize.js"></script>
<script src="/js/flot-chart/jquery.flot.pie.resize.js"></script>
<script src="/js/flot-chart/jquery.flot.selection.js"></script>
<script src="/js/flot-chart/jquery.flot.stack.js"></script>
<script src="/js/flot-chart/jquery.flot.time.js"></script>
<script src="/js/main-chart.js"></script>

<!--common scripts for all pages-->
<script src="/js/scripts.js"></script>


</body>
</html>
